<template>
  <view class="li-privacy-popup" v-if="showPrivacyMask">
    <view class="li-privacy-popup__header">
      <view class="li-picker__title">{{ title }}</view>
    </view>
    <view class="li-privacy-popup__container">
      <text>{{ desc }}</text>
      <text class="li-privacy-popup__container-protocol" @click="openPrivacyContract">{{ protocol }}</text>
      <text>{{ subDesc }}</text>
    </view>
    <view class="li-privacy-popup__footer">
      <button class="li-agree" id="agree-btn" open-type="getPhoneNumber|agreePrivacyAuthorization" @getphonenumber="getPhoneNumber" @agreeprivacyauthorization="handleAgree">同意并授权手机号</button>
      <button class="is-disagree" id="disagree-btn" @click="handleDisagree">
        不同意
      </button>
    </view>
  </view>
</template>

<script>
export default {
  name: 'PrivacyPopup',
  props: {
    showPrivacyMask: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '用户隐私保护提示'
    },
    desc: {
      type: String,
      default: '感谢您使用本应用，您使用本应用的服务之前请仔细阅读并同意'
    },
    protocol: {
      type: String,
      default: '《用户隐私保护指引》'
    },
    subDesc: {
      type: String,
      default: '。如您同意，请点击【同意】开始使用'
    },
  },
  methods: {
		openPrivacyContract(){
			wx.openPrivacyContract({
				success: (res) => {
				},
			})
		},
		handleDisagree() {
			this.showPrivacyMask = false
		},
		handleAgree() {
			this.showPrivacyMask = false
		},
    getPhoneNumber() {
      // 处理获取手机号逻辑
    },
  }
}
</script>

<style lang='less' scoped>
	.li-privacy-popup {
		padding: 26upx;
		box-sizing: border-box;
		overflow: hidden;
		width: 560upx;
		background: linear-gradient(180deg, #e5edff 0%, #ffffff 100%);
		border-radius: 24upx;
		position: fixed;
		bottom: 260upx;
		left: 50%;
		margin-left: -280upx;
		z-index: 999;
		box-shadow: 0 3upx 20upx 1upx rgba(247, 200, 122, .2);
		.li-privacy-popup__header {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 36upx;
			font-size: 32upx;
			font-weight: 550;
			color: #1a1a1a;
			line-height: 36upx;
			margin-bottom: 16upx;
		}
	
		&__container {
			width: 100%;
			box-sizing: border-box;
			font-size: 28upx;
			font-weight: 400;
			color: #333333;
			line-height: 48upx;
			margin-bottom: 48upx;
	
			&-protocol {
				font-weight: 550;
				color: #1c64fd;
			}
		}
	
		&__footer {
			display: flex;
			flex-direction: column;
	
			.is-disagree,
			.is-agree {
				width: 100%;
				height: 88upx;
				background: #ffffff;
				border-radius: 44upx;
				font-size: 32upx;
				font-weight: 400;
				color: #666666;
			}
	
			.is-agree {
				background: #1c64fd;
				color: #ffffff;
				margin-bottom: 18upx;
			}
	
			button {
				border: none;
				outline: none;
	
				&::after {
					border: none;
				}
			}
		}
	}
</style>
